<template>
  <Layout>
    <Breadcrumb :style="{margin: '10px 0'}">
      <BreadcrumbItem>权限管理</BreadcrumbItem>
      <BreadcrumbItem>分类权限</BreadcrumbItem>
      <BreadcrumbItem>权限设置</BreadcrumbItem>
    </Breadcrumb>
    <Card :bordered="false">
      <Select v-model="model_dp" multiple @on-change="change_select" clearable filterable style="width:70%"
              placeholder="请先选择需要设置文件分类权限的用户">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{item.label}}</Option>
      </Select>
      <Button v-if="CD_.btn_List.add_btn" type="success" style="float: right" @click="seve_menu" :disabled="spinShow">
        保存权限设置
      </Button>
    </Card>
    <div class="demo-spin-article" style="position: relative;margin-top: 15px">
      <Row :gutter="15">
        <Col span="24">
        <Card>
          <p slot="title">
            请为已选用户勾选可访问的文件分类及其权限
            <span style="color: #999999;font-weight: normal">  </span>
            <CheckboxGroup v-model="qx_list" style="float: right" @on-change="qx_change">
              <Checkbox label="全选上传"></Checkbox>
              <Checkbox label="全选下载"></Checkbox>
              <Checkbox label="全选审核"></Checkbox>
              <Checkbox label="全选查看"></Checkbox>
            </CheckboxGroup>
          </p>
          <Tree :data="MuenData" :load-data="loadData" show-checkbox multiple  @on-check-change="checkAll" ref="tree" :render="renderContent"></Tree>
        </Card>
        </Col>
      </Row>
      <Spin fix v-if="spinShow">请先选择需要设置权限的项目</Spin>
    </div>

  </Layout>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        spinShow: true,
        cityList: [
          {
            value: '测试员',
            label: '0'
          }
        ],
        treeID: 0,
        model_dp: [],
        check_muen: [],
        check_list: [],
        add_class_list: [],
        down_class_list: [],
        audit_class_list: [],
        view_class_list: [],
        btn_muen: [],
        MuenData: [
          {
            id:0 ,
            title: '基础数据',
            checkboxList:[],
            children: [
              {
                id:0 ,
                title: '用户管理',
                checkboxList:[],
                children: [
                  {
                    id:0 ,
                    title: '用户列表',
                    checkboxList:[],
                  }
                ]
              }
            ]
          }
        ],
        check_ids: '', //选中的菜单 所有
        class_cak: '', //选中的菜单
        ck_id_list: [], //半选 和选中的 id
        qx_list: [], //全选
        data_list: [],//已经选中的  菜单数据
      }
    },
    methods: {
      loadData (item, callback) {
        // 异步加载
        this.$http({
          method: 'get',
          url: this.CD_.qj_url + 'index/Treeclass/csh_fl?id='+ item.id,
        }).then(function (res) {
          var json = res.data
          if (json.status) {
            callback(json.data_list);
          } else {
            callback();
          }

        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '分类查询，错误：',desc:'错误：'+ err});
          this.isLoading = false;
        }.bind(this))

      },
      qx_change(qx_value){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/12/27 13:53
        *=======================================================
        *@function  全选某一项
        *=====================================================*/
        console.log(qx_value) ;
        var MuenData = this.MuenData ;
        this.MuenData = this.xh_qx_change(MuenData,qx_value) ;
      },
      xh_qx_change(MuenData,qx_value){
        for(var j = 0,len = MuenData.length; j < len; j++){
          if(MuenData[j].is_children == 'y'){
            this.xh_qx_change(MuenData[j].children,qx_value) ;
          }

          if(qx_value.indexOf('全选上传') > -1){
            let index = MuenData[j].checkboxList.indexOf('上传权限') ;
            if(index == -1){
              MuenData[j].checkboxList.push('上传权限') ;
            }
          }else {
            let index = MuenData[j].checkboxList.indexOf('上传权限') ;
            if(index > -1){
              MuenData[j].checkboxList.splice(index, 1);
            }

          }
          if(qx_value.indexOf('全选下载') > -1){
            let index = MuenData[j].checkboxList.indexOf('下载权限') ;
            if(index == -1){
              MuenData[j].checkboxList.push('下载权限') ;
            }
          }else {
            let index = MuenData[j].checkboxList.indexOf('下载权限') ;
            if(index > -1){
              MuenData[j].checkboxList.splice(index, 1);
            }

          }
          if(qx_value.indexOf('全选审核') > -1){
            let index = MuenData[j].checkboxList.indexOf('审核权限') ;
            if(index == -1){
              MuenData[j].checkboxList.push('审核权限') ;
            }
          }else {
            let index = MuenData[j].checkboxList.indexOf('审核权限') ;
            if(index > -1){
              MuenData[j].checkboxList.splice(index, 1);
            }

          }
          if(qx_value.indexOf('全选查看') > -1){
            let index = MuenData[j].checkboxList.indexOf('查看权限') ;
            if(index == -1){
              MuenData[j].checkboxList.push('查看权限') ;
            }
          }else {
            let index = MuenData[j].checkboxList.indexOf('查看权限') ;
            if(index > -1){
              MuenData[j].checkboxList.splice(index, 1);
            }

          }
        }

        return MuenData ;
      },
      renderContent (h, { root, node, data }) {
        return h('span', {
          style: {
            display: 'inline-block',
            width: '98%'
          },
          class:'hover_span'
        }, [
          h('span', [
            h('span', data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '32px'
            }
          }, [
            h("checkbox-group",
              {
                props: {
                  value: data.checkboxList
                },
                style: {
                  display:  this.ck_id_list.indexOf(data.id) > -1?"inline-block":"none",
                },
                on:{
                  'on-change':(val)=>{ //选择的时候判断数据
                    data.checkboxList = val ;
                  }
                }
              },[
                h('Checkbox', {
                  props: {
                    label: "上传权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
                h('Checkbox', {
                  props: {
                    label: "下载权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
                h('Checkbox', {
                  props: {
                    label: "审核权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
                h('Checkbox', {
                  props: {
                    label: "查看权限"
                  },
                  style: {
                    display: "inline-block"
                  }
                }),
              ])
          ])
        ]);
      },
      change_select(value) {
        if (value === undefined) {
          this.spinShow = true;
        } else {
          this.spinShow = false;
        }
        //重新拉取菜单数据
        this.getMenu();
      },
      checkAll(data_list) {

        //已选分类
        this.check_muen = this.$refs.tree.getCheckedAndIndeterminateNodes();
        this.check_list = this.$refs.tree.getCheckedNodes();

        this.class_cak = this.check_list.map(function (item) {
          return item.id
        }).join();//已选分类ID

        this.check_ids = this.check_muen.map(function (item) {
          console.log(item)
          return item.id
        }).join();//已选分类ID

        this.ck_id_list = this.check_muen.map(function (item) {
          return item.id
        })

        this.data_list = data_list ; //把菜单书赋值给全局变量


      },
      seve_menu() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/11 11:39
        *=======================================================
        *@function  保存项目权限设置
        *=====================================================*/

        //提交前给 给菜单参数赋值
        var _htis = this ;
        var data_list = this.data_list ;
        if(data_list != undefined){
          data_list.map(function (data) {
            if(data.checkboxList.indexOf('上传权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.add_class_list.indexOf(data.id) ;
              if(index == -1){
                _htis.add_class_list.push(data.id) ;
              }
            }else {
              let index = _htis.add_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.add_class_list.splice(index, 1);
              }

            }
            if(data.checkboxList.indexOf('下载权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.down_class_list.indexOf(data.id) ;
              if(index == -1) {
                _htis.down_class_list.push(data.id);
              }
            }else {
              let index = _htis.down_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.down_class_list.splice(index, 1);
              }

            }
            if(data.checkboxList.indexOf('审核权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.audit_class_list.indexOf(data.id) ;
              if(index == -1) {
                _htis.audit_class_list.push(data.id);
              }
            }else {
              let index = _htis.audit_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.audit_class_list.splice(index, 1);
              }

            }
            if(data.checkboxList.indexOf('查看权限') > -1 && _htis.ck_id_list.indexOf(data.id) > -1){
              let index = _htis.view_class_list.indexOf(data.id) ;
              if(index == -1) {
                _htis.view_class_list.push(data.id);
              }
            }else {
              let index = _htis.view_class_list.indexOf(data.id) ;
              if(index > -1){
                _htis.view_class_list.splice(index, 1);
              }

            }
          })
        }


        //保存项目权限设置
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/User/setClassTree',
          data: {
            check_ids: this.check_ids,
            class_cak: this.class_cak,
            add_class_list: this.add_class_list.join(),
            down_class_list: this.down_class_list.join(),
            audit_class_list: this.audit_class_list.join(),
            view_class_list: this.view_class_list.join(),
            model_dp: this.model_dp.join(),
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.$Notice.success({title: '权限设置成功'});
          } else {
            this.$Notice.error({title: '保存权限设置失败，请重试'});
          }
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
      },
      getMenu() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/9/14 13:56
        *=======================================================
        *@function  获取分类菜单
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Treeclass/csh_fl',
          data: {
            id: this.treeID
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {

            this.MuenData = json.data_list;

            //拉取菜单成功获取对应按钮选项
            var _this = this;
            setTimeout(function () {
              _this.checkAll();
            }, 1000);

          } else {
            this.$Notice.error({title: res.msg});
          }
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
      },
      getSelsctRole() {
        /*======================================================
         *@author wf_Huang
         *@Time 2018/10/11 9:19
         *=======================================================
         *@function  获取用户的下拉数据
         *=====================================================*/
        this.$http({
          method: 'get',
          url: this.CD_.qj_url + 'index/User/getSelsctDp'
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.cityList = json.dp_data;

          } else {
            this.$Notice.error({title: '没有用户信息'});
          }

        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
      }
    },
    mounted() {
      this.getSelsctRole();


    }
  }
</script>


<style scoped>
  .hover_span:hover{
    background-color: #f7f7f7;
  }
  .ivu-spin-fix {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.9);
  }



</style>
